import React, { PureComponent } from "react";
import {
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Platform,
  TouchableOpacity,
  Keyboard,
  StyleSheet
} from "react-native";
import {
  statusBarHeight,
  safeAreaBottomHeight,
  LoginToken,
  screenHeight
} from "../../util/AdapterUtil";
import NavigationService from "../../components/NavigationService";
import actions from "../../models/actions";
import { connect } from "react-redux";
import NavigationBar from "../../components/navigationBar";
import PasswordInput from "../../components/paykeybordview/PasswordInput";
import { NavigationEvents } from "react-navigation";
import MD5 from "react-native-md5";
import * as requestApi from "../../util/requestApi";

class ResetPayPassword extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      password1: "",
      password2: "",
      tip: "设置新的支付密码"
    };
  }
  componentWillUnmount() {}
  componentDidMount() {}

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <NavigationEvents
          onWillFocus={payload => {
            this.refs.input.show();
          }}
        />
        <NavigationBar
          navigation={this.props.navigation}
          isBack={true}
          title={"找回密码"}
        />

        <View
          style={{
            width: "100%",
            backgroundColor: "#fff",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Text
            style={{
              color: "#202020",
              marginBottom: 35,
              marginTop: 20,
              fontSize: 20,
              fontWeight: "bold"
            }}
          >
            {this.state.tip}
          </Text>

          <PasswordInput
            ref="input"
            onDone={data => {
              if (this.state.password1 === "") {
                this.setState({
                  password1: data,
                  tip: "确认新的支付密码"
                });
                this.refs.input.show(); //清除输入框
              } else {
                this.setState({ password2: data });
                if (this.state.password1 === data) {
                  //2次一样
                  this.resetPassword();
                } else {
                  //2次不一样
                  Toast.show("2次密码不一致");
                }
              }
            }}
          />
        </View>

        <View style={{ height: safeAreaBottomHeight }} />
      </View>
    );
  }

  hiddenKeyborad() {
    Keyboard.dismiss();
  }

  resetPassword = () => {
    let { istohome } = this.props.navigation.state.params;
    if (istohome) {
      let { password1 } = this.state;
      let { vCode, phone } = this.props.navigation.state.params;
      let sign = MD5.hex_md5(password1);
      let params = {
        phone: phone,
        newTradePassword: sign,
        confirmTradePassword: sign,
        verificationCore: vCode
      };
      requestApi
        .vCodeResetPayPassword(params)
        .then(res => {
          Toast.show("修改成功", 1000);
          NavigationService.reset("Drawer");
        })
        .catch(err => {
          Toast.show(err.msg, 1000);
        });
    }
  };
}

const styles = StyleSheet.create({
  loginTitle: {
    marginLeft: 15,
    marginTop: 25,
    color: "#202020",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default connect(
  ({ userInfo }) => ({
    userInfo
  }),
  {
    getLoginToken: actions.getLoginToken
  }
)(ResetPayPassword);
